datePickerStyle#

The datePickerStyle property allows you to customize the appearance and interaction of the DatePicker view in your UI.

Property Declaration#

1DatePickerStyle = "automatic" | "compact" | "graphical" | "wheel" | "field" | "stepperField"
2DatePickerComponents = "hourAndMinute" | "date" | "hourMinuteAndSecond"

DatePickerStyle Values#

The DatePickerStyle property accepts the following string values to define the appearance and interaction:

• automatic: The default style for date pickers.
• compact: Displays the date picker components in a compact, textual format.
• graphical: Displays the date picker as an interactive calendar or clock.
• wheel: Displays the date picker components as columns in a scrollable wheel.
• field (macOS only): Displays the components in an editable field.
• stepperField (macOS only): Displays the components in an editable field with an adjoining stepper to increment or decrement the selected component.

DatePickerComponents Values#

The displayedComponents property specifies which components of the date are shown and editable. Accepted values are:

• date: Displays the day, month, and year based on the locale.
• hourAndMinute: Displays the hour and minute components based on the locale.
• hourMinuteAndSecond (watchOS only): Displays the hour, minute, and second components based on the locale.

Usage Example#

Example 1: Graphical Date Picker#

1function View() {
2  const [date, setDate] = useState(Date.now())
3
4  return <DatePicker
5    title="Select Date"
6    value={date}
7    onChanged={setDate}
8    startDate={Date.now() - 31556926000} // 1 year ago
9    endDate={Date.now() + 31556926000}  // 1 year ahead
10    displayedComponents={["date"]}
11    datePickerStyle="graphical"
12  />
13}

This creates a graphical date picker for selecting a date.

Example 2: Compact Date Picker with Time Selection#

1function View() {
2  const [time, setTime] = useState(Date.now())
3  return <DatePicker
4    title="Select Time"
5    value={time}
6    onChanged={setTime}
7    displayedComponents={["hourAndMinute"]}
8    datePickerStyle="compact"
9  />
10}

This creates a compact date picker for selecting the hour and minute.

Example 3: Wheel Date Picker#

1function View() {
2  const [date, setDate] = useState(Date.now())
3  return <DatePicker
4    title="Choose Date and Time"
5    value={date}
6    onChanged={setDate}
7    displayedComponents={["hourAndMinute", "date"]}
8    datePickerStyle="wheel"
9  />
10}

This creates a date picker with a scrollable wheel for date and time selection.

Notes#

• The DatePickerStyle property maps directly to SwiftUI’s datePickerStyle modifier.
• Ensure that the displayedComponents and datePickerStyle values are compatible with the target platform to avoid runtime errors.
• For macOS-specific styles (field and stepperField), ensure the app is running on macOS.

With DatePickerStyle, you can create versatile date pickers to suit your app’s design and functional requirements.